<template>
    <div class="tree">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="ip" label="ip">
            </el-table-column>
            <el-table-column prop="device_id" label="设备id">
            </el-table-column>
            <el-table-column prop="device_name" label="设备名称">
            </el-table-column>
            <el-table-column prop="user_data_name" label="数据项">
            </el-table-column>
            <el-table-column label="配置" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleBaojing(scope.$index)">配置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form label-width="80px">
                <el-table :data="alarmList" style="width: 100%">
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.isSelected"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="alarm_id" label="报警id">
                    </el-table-column>
                    <el-table-column prop="alarm_level" label="报警级别">
                    </el-table-column>
                    <el-table-column prop="alarm_msg" label="报警提示">
                    </el-table-column>
                    <el-table-column label="报警条件">
                        <template slot-scope="scope">
                            {{ scope.row.op + scope.row.value }}
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'tree',
    data() {
        return {
            tableData: [
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_1_1",
                    "device_name": "红外",
                    "user_data_idx": 0,
                    "user_data_name": "红外",
                    "alarm_cond_list": [
                        3,
                        4
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_1_2",
                    "device_name": "烟雾",
                    "user_data_idx": 0,
                    "user_data_name": "烟感",
                    "alarm_cond_list": [
                        3,
                        4
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_6",
                    "device_name": "温度湿度#1",
                    "user_data_idx": 0,
                    "user_data_name": "温度",
                    "alarm_cond_list": [
                        1002
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_6",
                    "device_name": "温度湿度#1",
                    "user_data_idx": 1,
                    "user_data_name": "湿度",
                    "alarm_cond_list": null
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_6",
                    "device_name": "温度湿度#1",
                    "user_data_idx": 2,
                    "user_data_name": "温度状态",
                    "alarm_cond_list": [
                        1,
                        72,
                        73
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_6",
                    "device_name": "温度湿度#1",
                    "user_data_idx": 3,
                    "user_data_name": "湿度状态",
                    "alarm_cond_list": [
                        1,
                        72,
                        73
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_7",
                    "device_name": "温度湿度#2",
                    "user_data_idx": 0,
                    "user_data_name": "温度",
                    "alarm_cond_list": [
                        1002
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_7",
                    "device_name": "温度湿度#2",
                    "user_data_idx": 1,
                    "user_data_name": "湿度",
                    "alarm_cond_list": null
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_7",
                    "device_name": "温度湿度#2",
                    "user_data_idx": 2,
                    "user_data_name": "温度状态",
                    "alarm_cond_list": [
                        1,
                        72,
                        73
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_7",
                    "device_name": "温度湿度#2",
                    "user_data_idx": 3,
                    "user_data_name": "湿度状态",
                    "alarm_cond_list": [
                        1,
                        72,
                        73
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_8",
                    "device_name": "温度湿度#3",
                    "user_data_idx": 0,
                    "user_data_name": "温度",
                    "alarm_cond_list": [
                        1002
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_8",
                    "device_name": "温度湿度#3",
                    "user_data_idx": 1,
                    "user_data_name": "湿度",
                    "alarm_cond_list": null
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_8",
                    "device_name": "温度湿度#3",
                    "user_data_idx": 2,
                    "user_data_name": "温度状态",
                    "alarm_cond_list": [
                        1,
                        72,
                        73
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_8",
                    "device_name": "温度湿度#3",
                    "user_data_idx": 3,
                    "user_data_name": "湿度状态",
                    "alarm_cond_list": [
                        1,
                        72,
                        73
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_9",
                    "device_name": "温度湿度#4",
                    "user_data_idx": 0,
                    "user_data_name": "温度",
                    "alarm_cond_list": [
                        1002
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_9",
                    "device_name": "温度湿度#4",
                    "user_data_idx": 1,
                    "user_data_name": "湿度",
                    "alarm_cond_list": null
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_9",
                    "device_name": "温度湿度#4",
                    "user_data_idx": 2,
                    "user_data_name": "温度状态",
                    "alarm_cond_list": [
                        1,
                        72,
                        73
                    ]
                },
                {
                    "ip": "10.79.139.141",
                    "device_id": "5T_10.79.139.141_9",
                    "device_name": "温度湿度#4",
                    "user_data_idx": 3,
                    "user_data_name": "湿度状态",
                    "alarm_cond_list": [
                        1,
                        72,
                        73
                    ]
                }
            ],
            alarmList: [
                {
                    "alarm_id": 1,
                    "alarm_level": 0,
                    "alarm_msg": "正常",
                    "op": "=",
                    "value": 0,
                    isSelected: false
                },
                {
                    "alarm_id": 3,
                    "alarm_level": 0,
                    "alarm_msg": "正常",
                    "op": "=",
                    "value": 1,
                    isSelected: false
                },
                {
                    "alarm_id": 4,
                    "alarm_level": 3,
                    "alarm_msg": "告警",
                    "op": "=",
                    "value": 0,
                    isSelected: false
                },
                {
                    "alarm_id": 72,
                    "alarm_level": 1,
                    "alarm_msg": "告警",
                    "op": "=",
                    "value": 1,
                    isSelected: false
                },
                {
                    "alarm_id": 73,
                    "alarm_level": 2,
                    "alarm_msg": "故障",
                    "op": "=",
                    "value": 2,
                    isSelected: false
                },
                {
                    "alarm_id": 1002,
                    "alarm_level": 3,
                    "alarm_msg": "报警",
                    "op": ">",
                    "value": 23,
                    isSelected: false
                }
            ],
            // 当前对话框激活的数据项索引
            activeIndex: undefined,
            dialogVisible: false,
            title: '',
            // 合并单元格
            rowspan: 1,
            // 报警配置id
            alarm_id: []
        }
    },
    mounted() {
        this.getRowspan(this.tableData)
    },
    methods: {
        handleBaojing(index) {
            this.activeIndex = index
            this.title = `${this.tableData[index].device_name}设备 ${this.tableData[index].user_data_name}数据项`
            let alarm_cond_list = this.tableData[index].alarm_cond_list || []
            alarm_cond_list.forEach(item => {
                let v = this.alarmList.find(ele => {
                    return ele.alarm_id === item
                })
                if (v) {
                    v.isSelected = true
                }
            });
            this.dialogVisible = true

        },
        handleClose() {
            this.alarmList.forEach(item => {
                item.isSelected = false
            })
            this.dialogVisible = false
        },
        handleSave() {
            let filterArray = []
            this.alarmList.forEach(item => {
                if (item.isSelected) {
                    filterArray.push(item.alarm_id)
                }
            })
            this.tableData[this.activeIndex].alarm_cond_list = filterArray
            // 状态清空
            this.alarmList.forEach(item => {
                item.isSelected = false
            })
            this.dialogVisible = false
        },
        // 处理合并单元格逻辑
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.ipSpan === 0) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } else {
                    return {
                        rowspan: row.ipSpan,
                        colspan: 1
                    }
                }
            }
            if (columnIndex === 1) {
                if (row.deviceIdSpan === 0) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } else {
                    return {
                        rowspan: row.deviceIdSpan,
                        colspan: 1
                    }
                }
            }
            if (columnIndex === 2) {
                if (row.deviceNameSpan === 0) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } else {
                    return {
                        rowspan: row.deviceNameSpan,
                        colspan: 1
                    }
                }
            }
        },
        // 处理跨行合并数据
        getRowspan(tableData) {
            /**
             * 有两列数据需要合并(三列数据需要合并，但是设备id和设备名称可看做相同合并条件)
             * 用于记录当前合并位置 */
            let ipRow = 0
            let deviceRow = 0
            for (let i = 0; i < tableData.length; i++) {
                if (i === 0) {
                    /**
                     * 每行数据的ipSpan代表ip项需要跨几行合并
                     * deviceIdSpan代表设备id项需要跨几行合并
                     * deviceNameSpan代表设备名称项需要跨几行合并（因为d绑定所以和deviceIdSpan相同）
                     */
                    tableData[i].ipSpan = 1
                    tableData[i].deviceIdSpan = 1
                    tableData[i].deviceNameSpan = 1
                } else {
                    if (tableData[i].ip === tableData[ipRow].ip) {
                        tableData[ipRow].ipSpan++
                        tableData[i].ipSpan = 0
                    } else {
                        tableData[i].ipSpan = 1
                        ipRow = i
                    }
                    if (tableData[i].device_id === tableData[deviceRow].device_id) {
                        tableData[deviceRow].deviceIdSpan++
                        tableData[deviceRow].deviceNameSpan++
                        tableData[i].deviceIdSpan = 0
                        tableData[i].deviceNameSpan = 0
                    } else {
                        tableData[i].deviceIdSpan = 1
                        tableData[i].deviceNameSpan = 1
                        deviceRow = i
                    }
                }
            }
        }
    }
}
</script>
